﻿import QtQuick 2.0
import QtQuick.Controls 1.4
//柱状图
Item {
    id: item
    width: 966-x
    height: 266
//    anchors.centerIn: parent
    visible: false

    property var _list: new Array
    property var _listX: new Array
    property var _listY: new Array
    property var _listH: new Array
    property real _max: 0
    property real _upLevel: 0

    property real q1x: 0
    property real q1y: 0
    property real q2x: 0
    property real q2y: 0

    property bool isDisplayLine: false
    property int currentIndex: 0

    function show(list){

        if(list.length == 0) return

        item.visible = false

        hide()

        _list.length = 0
        _listX.length = 0
        _listY.length = 0
        _listH.length = 0

        _list = list

        _max = getMax(list)
        _upLevel = getUpLevel(_max) + 10

        canvas.requestPaint()

        item.visible = true
    }

    function getMax(list){
        var temp = 0
        for(var i=0; i<list.length; i++){
            temp = Math.max(temp,list[i])
        }

        return temp
    }
    //get 上线 ， 最靠近的？5
    function getUpLevel(value){
        if(Number(value) % 5 == 0){
            return value
        }
        else{
            //
            return (Math.floor((Number(value) / 5)) + 1 ) * 5
        }
    }

    function hide(){
        isDisplayLine = false
    }

    //x,y落在哪个index
    function getContent(x,y){

        var w = canvas.zhuWidth

        for(var i in _listX){

            if(x>=_listX[i] && x<=_listX[i]+w
                    && y>=_listY[i] && y<=_listY[i]+_listH[i] && _listH[i] !== 0){

                return i
            }
        }

        return -1
    }

    Item{
        id: rectBg
        anchors.fill: parent
    }

    Canvas {
        id: canvas
        anchors.fill: rectBg

        property color color: "#FF0000"
        property real lastX
        property real lastY
        property real qx
        property real qy    //控制点
        property real topSpacing: 50
        property real leftSpacing: 10
        property real xSpacing: 35.7
        property real ySpacing: (canvas.height-100)/(_upLevel/5)
        property real bzLenth: 12    //贝赛尔曲线取点距离    曲率
        property real zhuWidth: 20
        property real _top: _upLevel + Math.floor((50+topSpacing)/ySpacing*5)

        function drawVolume(ctx,color,x,y,w,h)
        {
            _listX.push(x)
            _listY.push(y)
            _listH.push(h)


            ctx.save();
            ctx.fillStyle = color;
            ctx.globalAlpha = 0.8;
            ctx.lineWidth = 0;
            ctx.beginPath();
            ctx.shadowOffsetX = 4;
            ctx.shadowBlur = 3.5;
            ctx.shadowColor = Qt.darker(color);
            ctx.fillRect(x,y,w,h);
            ctx.stroke();
            ctx.restore();


            if(h == 0){
                ctx.save();
                ctx.fillStyle = "#cfcfcf";
                ctx.globalAlpha = 0.8;
                ctx.lineWidth = 0;
                ctx.beginPath();
                ctx.shadowOffsetX = 4;
                ctx.shadowBlur = 3.5;
                ctx.shadowColor = Qt.darker("#cfcfcf");
                ctx.fillRect(x,y-5,w,5);
                ctx.stroke();
                ctx.restore();
            }
        }

        onPaint: {
            //0,0 在左上角
            var ctx = getContext('2d')

            ctx.clearRect(0, 0, canvas.width, canvas.height)

            for(var i=0;i<24; i++){
                //1-12
                ctx.lineWidth = 1.0
//                ctx.strokeStyle = "#000000"
                ctx.fillStyle = "#FFFFFF"
                ctx.font = "15px sans-serif"
                ctx.textAlign = "center"
                ctx.beginPath()
                ctx.text(i+1,leftSpacing + xSpacing*i,canvas.height-7)
//                ctx.stroke()
                ctx.fill()
            }

            for(var i=0; i<_list.length; i++){

                ctx.lineWidth = 2.0
                ctx.strokeStyle = "#50da50"
                ctx.beginPath()
                var x1 = leftSpacing + i*xSpacing
                var y1 = (canvas.height-100) - _list[i]*ySpacing/5 + topSpacing
//                ctx.moveTo(x1, y1)

                lastX = leftSpacing + (i+1)*xSpacing
                lastY = (canvas.height-100) - _list[i+1]*ySpacing/5 + topSpacing

                drawVolume(ctx,ctx.strokeStyle,
                           x1,((canvas.height-129+50) - _list[i]*ySpacing/5 + topSpacing),
                           zhuWidth,(_list[i]*ySpacing/5));

                ctx.stroke()

                //数字
//                ctx.lineWidth = 2.0
//                ctx.strokeStyle = "#FF0000"
//                ctx.beginPath()
//                ctx.text(_list[i],x1,((canvas.height-160) - _list[i]*ySpacing/5 + topSpacing) - 10)
//                ctx.stroke()

            }

            if(isDisplayLine){

                var x = _listX[currentIndex]
                var y = _listY[currentIndex]
                var h = _listH[currentIndex]
                var w = canvas.zhuWidth

                drawVolume(ctx,"#FFFF00",x,y,w,h)
            }

            var l = Math.floor(_top/5) //5
            for(var i=0; i<=5; i++){
                //左侧
                var inum = i*l

                ctx.lineWidth = 1.0
                ctx.fillStyle = "#FFFFFF"
                ctx.font = "15px sans-serif"
                ctx.textAlign = "center"
                ctx.beginPath()
                ctx.text(inum,inum<10?5:0,(canvas.height-100) - inum*ySpacing/5 + topSpacing + 10)
                ctx.fill()
            }
        }
        onPainted: {
            item.visible = true
        }
    }

    MouseArea{
        id: mouse
        anchors.fill: canvas
        onClicked: {

            //根据y坐标计算应该对应哪一天，然后根据这一天的x,y描绘射线
            var currentIndexTemp = getContent(mouse.x,mouse.y)

            if(currentIndexTemp == -1){
//                isDisplayLine = false
            }
            else{

                currentIndex = currentIndexTemp

                if(currentIndex < 12){
                    //right
                    imgFuChuang.x = _listX[currentIndex] + canvas.zhuWidth + 5
                }
                else{
                    //left
                    imgFuChuang.x = _listX[currentIndex] - imgFuChuang.width - 5
                }

                isDisplayLine = true

                canvas.requestPaint()
            }
//            console.log("currentIndex--",currentIndexTemp,currentIndex,_list)
        }
    }

}
